<template>
    <div style="padding:1rem">
         <el-row>
              <el-col :span="6">
                <z-form
        ref="formRef"
        status-icon
        :model="state"
        :rules="{
            username: {
                min: 6,
                max: 10,
                message: '用户名6-10位',
                trigger: ['change', 'blur']
            }
        }"
        >
            <z-form-item
                prop="username"
                :rules="[{ required: true, message: '请输入用户名', trigger: 'blur' }]"
                >
                <z-input
                        placeholder="请输入密码"
                        v-model="state.username"
                        type="text"
                    />
                <template #label> 用户名 </template>
            </z-form-item>
            <z-form-item
                prop="password"
                :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]"
                >
                    <z-input
                        placeholder="请输入密码"
                        v-model="state.password"
                        type="text"
                    >
                    <template #prefixIcon>
                          <z-icon>
                             <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704z"></path></svg> 
                           </z-icon>
                    </template>
                    </z-input>
                <template #label> 用户名 </template>
            </z-form-item>
        </z-form>
        <z-input
            placeholder="请输入密码"
            v-model="state.password"
            type="text"
            size="small" 
        >
        <template #prepend>
            aaaasdasd
        </template>
        <template #prefixIcon>
                <z-icon>
                    <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704z"></path></svg> 
                </z-icon>
        </template>
        </z-input>
        <button @click="validateForm">点击</button>
        <z-icon size="16" color="red">
            <CashOutline></CashOutline>
        </z-icon>
              </el-col>
         </el-row>
         <z-button plain round @click="onclicks">aaa</z-button>
         <z-button plain round disabled @click="onclicks">aaa</z-button>
         <z-button type="danger" plain circle>
            <template #icon>
                <z-icon>
                      <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704z"></path></svg> 
                </z-icon>
            </template>
            </z-button>
       
    </div>
</template>

<script setup lang="ts">
 import { defineAsyncComponent,reactive, ref } from 'vue';
 import { CashOutline } from '@vicons/ionicons5';
 const Loading = defineAsyncComponent(()=>import('@/ui/internal-icon/loading')); 
const state = reactive({ username: '', password: '' });
const formRef = ref();
const validateForm = () => {
  const form = formRef.value
  form?.validate((valid, errors) => {
    console.log(valid, errors)
  })
}
const onclicks = (e)=>{
      console.log(e);
}
</script>

<style>
 
</style>